@charset "utf-8";


.hh1{
    font-size:5vh;
    font-weight: bold;
}
@media (orientation: portrait){
.hh1{
    font-size:4.5vh;
    margin-top:2%;
}
.item{
    margin:4% 1% 4% auto;
    padding:4vh 0 4vh 0;
    text-align:center;
    font-weight: bold;
    border: solid 3px #000000;
}
.top1{
    border: solid 3px #FF69A3;
    background:rgba(255, 105, 163, 0.2);
    color: #222;
}
.top2{
    border: solid 3px #5D99FF;
    background:rgba(93, 153, 255, 0.2);
    color: #222;
}
.top3{
    border: solid 3px #FF773E;
   background:rgba(255, 119, 62, 0.2);
    color: #222;
}
.top4{
    border: solid 3px #17F9AD;
    background:rgba(23, 249, 173, 0.2);
    color: #222;
}
}
@media (orientation: landscape){
.hh1{
    margin-bottom:0;
    font-size:8vh;
    margin-top:2%;
}
.item{
    font-size:5.5vh;
    margin:0 auto 5% 0;
    padding:3vh 0 3vh 3vw;
    text-align:left;
    font-weight: bold;
    border: solid 3px #000000;
    width:40%;
}
.container{
    display:flex;
    flex-wrap: wrap;
}
.top1{
    border: solid 3px #FF69A3;
    background: -moz-linear-gradient(#fff, #fff, #fff,#FF69A3,#FF69A3);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#FF69A3,#FF69A3);
    background: linear-gradient(to right, #fff, #fff, #fff,#FF69A3,#FF69A3);
    color: #222;
}
.top2{
    border: solid 3px #5D99FF;
    background: -moz-linear-gradient(#fff, #fff, #fff,#5D99FF,#5D99FF);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#5D99FF,#5D99FF);
    background: linear-gradient(to right, #fff, #fff, #fff,#5D99FF,#5D99FF);
    color: #222;
}
.top3{
    border: solid 3px #FF773E;
    background: -moz-linear-gradient(#fff, #fff, #fff,#FF773E,#FF773E);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#FF773E,#FF773E);
    background: linear-gradient(to right, #fff, #fff, #fff,#FF773E,#FF773E);
    color: #222;
}
.top4{
    border: solid 3px #17F9AD;
    background: -moz-linear-gradient(#fff, #fff, #fff,#17F9AD,#17F9AD);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#17F9AD,#17F9AD);
    background: linear-gradient(to right, #fff, #fff, #fff,#17F9AD,#17F9AD);
    color: #222;
}
}
@media screen and (min-width:768px){
.hh1{
    margin-left:1%;
    margin-top:2%;
    text-shadow:2vh 2vh 2vh #fff;
    
}
.item{
    font-size:4vh;
    margin:2% 1% 0;
    padding:2% 1%;
    text-align:left;
    font-weight: bold;
    width:50%;
    
}
.container{
    display:block;
}
.top1{
    border: solid 3px #FF69A3;
    background: -moz-linear-gradient(#fff, #fff, #fff,#FF69A3,#FF69A3);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#FF69A3,#FF69A3);
    background: linear-gradient(to right, #fff, #fff, #fff,#FF69A3,#FF69A3);
    color: #222;
}
.top2{
    border: solid 3px #5D99FF;
    background: -moz-linear-gradient(#fff, #fff, #fff,#5D99FF,#5D99FF);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#5D99FF,#5D99FF);
    background: linear-gradient(to right, #fff, #fff, #fff,#5D99FF,#5D99FF);
    color: #222;
}
.top3{
    border: solid 3px #FF773E;
    background: -moz-linear-gradient(#fff, #fff, #fff,#FF773E,#FF773E);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#FF773E,#FF773E);
    background: linear-gradient(to right, #fff, #fff, #fff,#FF773E,#FF773E);
    color: #222;
}
.top4{
    border: solid 3px #17F9AD;
    background: -moz-linear-gradient(#fff, #fff, #fff,#17F9AD,#17F9AD);
    background: -webkit-linear-gradient(#fff, #fff, #fff,#17F9AD,#17F9AD);
    background: linear-gradient(to right, #fff, #fff, #fff,#17F9AD,#17F9AD);
    color: #222;
}
}

html{
    background:rgba(238, 238, 238, 0.5);
}