/* styles.css */


cursor {
  
}





@font-face {
    font-family: 'Gotham Bold';
    src: url('fonts/Gotham-Bold.otf') format('opentype'),
    url('fonts/Gotham-Bold.otf') format('opentype');
    font-weight: 0;
    font-style: normal;
}

@font-face {
    font-family: 'PressStart2P';
    src: url('fonts/PressStart2P-Regular.ttf') format('truetype'),
    url('fonts/PressStart2P-Regular.ttf') format('truetype');
    font-weight: 0;
    font-style: normal;
}
span.Discord a { 
    color: rgb(179, 132, 190); 
    text-decoration: none; 
} 

/* https://discordapp.com/users/1394162903522873384 */

.box {
  position: relative;
  width: 700px; /* width of the box */
  height: 20px; /* height of the box */
  background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.button1 h2 {
    color:rgb(255, 255, 255);
      font-size: 20px;  /* smaller text so it fits */
      margin: 0;        /* remove big default margins */
      line-height: 1;   /* tighter spacing */
      font-family: 'Gotham Bold', sans-serif;
      text-shadow: 2px 2px #ff6ba9;
      user-select: none;
      position: absolute;
      left: 10;
      top: 10 ;
    }

.button2 h2 {
    color:rgb(255, 255, 255);
      font-size: 20px;  /* smaller text so it fits */
      margin: 0;        /* remove big default margins */
      line-height: 1;   /* tighter spacing */
      font-family: 'Gotham Bold', sans-serif;
      text-shadow: 2px 2px #ff6ba9;
      position: absolute;
      left: 80;
      top: 10 ;
      user-select: none;

    }

.center {
  position: relative;
  width: 700px; /* width of the box */
  height: 0px; /* height of the box */
background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.box2 {

  position: relative;
  width: 700px; /* width of the box */
  height: 600px; /* height of the box */
  background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.box2 h1 {
    position: absolute;
    top: 40px;
    left: 250px;
    color:white;
    font-size: 50;
    text-align: center;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
     transition: font-size 0.3s ease-in-out, left 0.3s ease-in-out, width .5s ease-in-out, height .2s ease-in-out;
}

.box2 h1:hover {
  font-size: 55 ;
  left: 220px;
}

.box2 p {
    position: absolute;
    top: 280px;
    color:white;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
}

.box2 h2 {
    position: absolute;
    top: 190px;
    color:white;
    font-size: 30;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
}

.box2 a {
    top: 200px;
    color: #ffbad7;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    text-decoration: none;
    transition: font-size .7s ease, color .2s ease-in-out;
    user-select: none;
}

.box2 a:hover {
  font-size: 30 ;
  color: rgb(255, 172, 223);
}

.box2 img {
    width: 350;
}

.mask1 {
    width: 200px;
    height: 200px;


    position: absolute;
    top: 20;
    left: 10;
    display: inline-block;
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out, width .5s ease-in-out, height .2s ease-in-out;
}

.mask1:hover {

  position: absolute;
 top: 1;
 left: 5;
 width: 230px;
 height: 230px;
 
}


.mask1 img {
  
    width: 100%;
    height: 100%;


     -webkit-mask-image: url('images/mask1.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    border: solid #ffffff;
    mask-image: url('images/mask1.png');    
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
position: absolute;
top: -20 ;
left: -20 ;

border-width: 20 20px;

    }




.sidebox1left {
  position: relative;
  width: 300px; /* width of the box */
  height: 380px; /* height of the box */
  left: -540px;
  top: 34;
  background-color: rgba(179, 132, 190, 0.5); /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}


.intsidebox1left p {

    position: absolute;
    top: -10px;
    left: 70px;
    color:white;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
}

.intsidebox1left img {


  width: 200px;
  height: 200px;
position: relative;
top: 50;
left: 50;
 transition: left .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;

}

.intsidebox1left img:hover{
width: 250;
height: 250;
left: 25;

}


.container1 {
position: absolute;
  width: 300px; /* width of the box */
  height: 20px; /* height of the box */
  top: -52px;
  left: -4px ;
 background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;

}

.container1 p {

    position: absolute;
    top: -10px;
    left: 120px;
    color:white;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;

}

.cherryblossombg {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}



/* styles.css: interests */

.intbox {
  position: relative;
  width: 700px; /* width of the box */
  height: 20px; /* height of the box */
  background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.intcenter {
  position: relative;
  width: 700px; /* width of the box */
  height: 0px; /* height of the box */
background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.intbox2 {

  position: relative;
  width: 700px; /* width of the box */
  height: 600px; /* height of the box */
  background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.intbox2 h1 {
    position: absolute;
    top: 40px;
    left: 250px;
    color:white;
    font-size: 50;
    text-align: center;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
     transition: font-size 0.3s ease-in-out, left 0.3s ease-in-out, width .5s ease-in-out, height .2s ease-in-out;
}

.intbox2 h1:hover {
  font-size: 55 ;
  left: 220px;
}

.intbox2 p {
    position: absolute;
    top: 270px;
    color:white;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
}


.extrainfo p {
  position: absolute;
    top: 310px;
    color:white;
    font-size: 10;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
}


.intbox2 h2 {
    position: absolute;
    top: 190px;
    color:white;
    font-size: 30;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
}

.intbox2 ul {
    position: absolute;
    top: 310px;
    color:white;
    font-size: 25;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;
    list-style:none;
}

.intbox2 a {
    top: 200px;
    color: #ffbad7;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    text-decoration: none;
    transition: font-size .7s ease, color .2s ease-in-out;
    user-select: none;
}

.intbox2 a:hover {
  font-size: 30 ;
  color: rgb(255, 172, 223);
}

.intbox2 img {
    width: 350;
}


.intmask1 {
    width: 200px;
    height: 200px;


    position: absolute;
    top: 20;
    left: 10;
    display: inline-block;
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out, width .5s ease-in-out, height .2s ease-in-out;
}

.intmask1:hover {

  position: absolute;
 top: 1;
 left: 5;
 width: 230px;
 height: 230px;
 
}


.intmask1 img {
  
    width: 100%;
    height: 100%;


     -webkit-mask-image: url('images/mask1.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    border: solid #ffffff;
    mask-image: url('images/mask1.png');    
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
position: absolute;
top: -20 ;
left: -20 ;

border-width: 20 20px;

    }




.intsidebox1left {
  position: relative;
  width: 300px; /* width of the box */
  height: 380px; /* height of the box */
  left: -540px;
  top: 34;
  background-color: rgba(179, 132, 190, 0.5); /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;
}

.intcontainer1 {
position: absolute;
  width: 300px; /* width of the box */
  height: 20px; /* height of the box */
  top: -52px;
  left: -4px ;
 background-color: rgba(179, 132, 190, 0.5);; /* background color */
  border: 4px solid rgb(255, 255, 255); /* border */
  padding: 10px; /* padding inside the box */
  margin: 0px auto; /*  margin */
  word-wrap: normal;

}

.intcontainer1 p {

    position: absolute;
    top: -10px;
    left: 90px;
    color:white;
    font-size: 20;
    font-family: 'Gotham Bold', sans-serif;
    text-shadow: 2px 2px #ff6ba9;
    user-select: none;

}