/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {

  font-family: Mainfont;
  background-image: url("checkedbg.jpg");
  background-size: auto;
  color: black;
}



.welcome {
  cursor:pointer;
  left:40%;
  top:70%;
  position:absolute;
  transition:0.15s;
  border: none;
  background-color: transparent;
  background-image: url("welcomehover.png");
  height:266px;
  width:366px;
  background-size: cover;
}
.welcome:hover{
  transition:0.15s;
  background-image: url("welcome.png");
  background-size: cover;
}



.status{

display: inline-block;
margin:2%;
padding-bottom: 2%;
padding-left: 2%;
padding-right:3%;
background-image: url("concrete.jpg");
font-size: 200%; 
}
.status h2{
color: #00b843;
}
.status h3{
white-space: nowrap;
margin:2%;
}
.status div{
display: flex;
}
.status button{
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
width: 90px;
height:75px;
cursor:pointer;
}
.status button h4{
color:#3d020a;
  }
.status button h4:hover{
transition:0.5s;
color:#750010;
  }
.statushistory{
color:#3d020a;
}
.statushistory:hover{
transition:0.5s;
color:#750010;
text-decoration: underline;
}

.letter{
width: 90px;
height:130px;
position:absolute;
background-size: cover;

}

.y{
transition:0.1s;
left:60%;
bottom:80%;
background-image: url(y1.png);
}
.y:hover{
transition:0.1s;
background-image: url(y2.png);
}
.o{
transition:0.1s;
left:64%;
bottom:78%;
background-image: url(o1.png);
}
.o:hover{
transition:0.1s;
background-image: url(o2.png);
}
.u{
transition:0.1s;
left:68%;
bottom:79%;
background-image: url(u1.png);
}
.u:hover{
transition:0.1s;
background-image: url(u2.png);
}


.n{
transition:0.1s;
left:76%;
bottom:80%;
background-image: url(n1.png);
}
.n:hover{
transition:0.1s;
background-image: url(n2.png);
}
.e{
transition:0.1s;
left:80%;
bottom:79%;
background-image: url(e1.png);
}
.e:hover{
transition:0.1s;
background-image: url(e2.png);
}
.e2{
transition:0.1s;
left:84%;
bottom:78%;
background-image: url(e3.png);
}
.e2:hover{
transition:0.1s;
background-image: url(e4.png);
}
.d{
transition:0.1s;
left:88%;
bottom:80%;
background-image: url(d1.png);
}
.d:hover{
transition:0.1s;
background-image: url(d2.png);
}


.t{
transition:0.1s;
left:68%;
bottom:65%;
background-image: url(t1.png);
}
.t:hover{
transition:0.1s;
background-image: url(t2.png);
}
.o2{
transition:0.1s;
left:72%;
bottom:65%;
background-image: url(o3.png);
}
.o2:hover{
transition:0.1s;
background-image: url(o4.png);
}


.n2{
transition:0.1s;
left:80%;
bottom:63%;
background-image: url(n3.png);
}
.n2:hover{
transition:0.1s;
background-image: url(n4.png);
}
.e3{
transition:0.1s;
left:84%;
bottom:62%;
background-image: url(e5.png);
}
.e3:hover{
transition:0.1s;
background-image: url(e6.png);
}
.r{
transition:0.1s;
left:88%;
bottom:63%;
background-image: url(r1.png);
}
.r:hover{
transition:0.1s;
background-image: url(r2.png);
}
.d2{
transition:0.1s;
left:92%;
bottom:62%;
background-image: url(d3.png);
}
.d2:hover{
transition:0.1s;
background-image: url(d4.png);
}



.o3{
transition:0.1s;
left:76%;
bottom:50%;
background-image: url(o5.png);
}
.o3:hover{
transition:0.1s;
background-image: url(o6.png);
}
.u2{
transition:0.1s;
left:80%;
bottom:48%;
background-image: url(u3.png);
}
.u2:hover{
transition:0.1s;
background-image: url(u4.png);
}
.t2{
transition:0.1s;
left:84%;
bottom:49%;
background-image: url(t3.png);
}
.t2:hover{
transition:0.1s;
background-image: url(t4.png);
}



.music{
  padding-top:1.5%;
  left: 50px;
  background-image: url(musicbg.png);
  width:37%;
  text-align: center;

}

.music h2{
font-size:200%;
margin: 0;
color:#520806;
}
.music h1{
font-size:400%;
color:#141010;
margin-bottom:0;
}
.music b{
margin-top:0;
font-size:150%;
color:#141010;
}
.music img{
width:250px;
height: 250px;
margin:5%;
}
.music div{
display: flex;
margin-left: 20px;
margin-right: 20px;
align-items:center;
padding:5%;

}
.music p{
  margin-left:0;
margin-right:5%;
font-size:150%;
}

.music button{
transition:1s;
  background-image: url(vinylbutton.png);
  background-size:cover;
  width:150px;
  height:150px;
  cursor:pointer;
    background-color: transparent;
    border:none;
}
.music button:hover{
transition:50s;
transform:rotate(20000deg);
}




.mood{
padding-left:0px;
position: absolute;
left: 70%;
bottom: -5%;
width: 420px;
height: 420px;
background-image:url(moodbg.jpg);
background-size:420px 420px;
text-align: center;
}

.mood div{
text-align: center;
margin-left: 115px;
margin-top:60px;
width: 200px;
height:200px;
border-radius: 50%;
background-color: rgba(142, 142, 142, 0.5) ;
transition:1s;
}
.mood div:hover{
text-align: center;
margin-left: 105px;
margin-top:50px;
width: 220px;
height:220px;
border-radius: 50%;
background-color: #8E8E8E;
background-color: rgba(142, 142, 142, 1) ;
transition:1s;
}
.mood div h1{
position: absolute;
top:160px;
left:160px;
font-size:250%;
}
.mood a{
margin:5%;
text-decoration:underline;
cursor:pointer;
transition:0.2s;
}
.mood a:hover{
color:#081d40;
transition:0.2s;
}




@font-face {

  font-family: "Mainfont"; 
  src: url("mainfont.ttf") format("truetype"); 
}