/*
Author:  Leonard Garcia
All Rights Reserved
Created on Jan 17, 2022, 5:29:26 PM
*/

* {
    margin: 0;
    padding: 0;
    font-family: "Montserrat",sans-serif;
}

body {
    background-color: black;
    color: darkgreen;
}
h1 {
    font-size: 30px;
}
svg{visibility:hidden;}
.text{
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 600;
    fill: #E217AF;
}

.verbs {
    font-size: 20px;
    font-weight: 600;
    border: 4px silver;
    border-style: solid;
    border-radius: 50%;
    padding: 1rem;
    width: fit-content;
    margin-left: 2rem;
    z-index: -1;
}
.footer {
    color: #E217AF;
    position: absolute;
    top:  40rem;
    left: 50rem;
}
#num1 {  /*give up*/
    background-color: blueviolet;
    color: black;
}
#num2 { /*figure out*/
    background-color: dodgerblue;
    color: black;
}
#num3 { /*set up*/
    background-color: crimson;
    color: black;
}
#num4 { /*turn down*/
    background-color: chartreuse;
    color: black;
}
#num5 { /*turn up*/
    background-color: yellow;
    color: black;
}

/*********************************************************************************/
/*************************************Laptop*************************************/
/********************************************************************************/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px) 
{
    .footer {
        color: #E217AF;
        position: absolute;
        top:  40rem;
        left: 40rem;
    }
}

/*********************************************************************************/
/*************************************iPad**Landscape****************************/
/********************************************************************************/
@media only screen 
and (min-device-width : 820px) 
and (max-device-width : 1180px) 
and (orientation : landscape) {
    .text{
        font-family: sans-serif;
        font-size:   1.9rem;
        font-weight: 600;
        fill: #E217AF;
    }
    .verbs {
        font-size: 25px;
        padding: .5rem;
    }
    #num1 {  /*give up*/
        position: absolute;
        top:  990px;
        left: 105px;
    }
    #num2 {  /*figure out*/
        position: absolute;
        top:  1070px;
        left: -10px;
    }
    #num3 { /*set up*/
        position: absolute;
        top:  1170px;
        left: -5px;
    }
    #num4 { /*turn down*/
        position: absolute;
        top:  1200px;
        left: -50px;
    }
    #num5 { /*turn up*/
        position: absolute;
        top:  1100px;
        left: -220px;
    }
    .footer {
        color: #E217AF;
        position: absolute;
        top:  40rem;
        left: 32rem;
    }
}
/*********************************************************************************/
/*************************************iPad**Portrait****************************/
/********************************************************************************/
@media only screen 
and (min-device-width : 820px) 
and (max-device-width : 1180px) 
and (orientation : portrait) {
    .text{
        font-family: sans-serif;
        font-size:   1.9rem;
        font-weight: 600;
        fill: #E217AF;
    }
    .verbs {
        font-size: 25px;
        padding: .5rem;
    }
    #num1 {  /*give up*/
        position: absolute;
        top:  990px;
        left: 105px;
    }
    #num2 {  /*figure out*/
        position: absolute;
        top:  1070px;
        left: -10px;
    }
    #num3 { /*set up*/
        position: absolute;
        top:  1170px;
        left: -5px;
    }
    #num4 { /*turn down*/
        position: absolute;
        top:  1200px;
        left: -50px;
    }
    #num5 { /*turn up*/
        position: absolute;
        top:  1100px;
        left: -220px;
    }
    .footer {
        color: #E217AF;
        position: absolute;
        top:  40rem;
        left: 21rem;
    }
}

/*********************************************************************************/
/*************************************Cellphone***********************************/
/********************************************************************************/
@media (min-width: 240px) and (max-width: 414px) {
    .text{
        font-family: sans-serif;
        font-size:   2.6rem;
        font-weight: 600;
        fill: #E217AF;
    }
    .verbs {
        font-size: 15px;
        padding: .5rem;
    }
    #num1 {  /*give up*/
        position: absolute;
        top:  990px;
        left: -115px;
    }
    #num2 {  /*figure out*/
        position: absolute;
        top:  1070px;
        left: -315px;
    }
    #num3 { /*set up*/
        position: absolute;
        top:  1070px;
        left: -315px;
    }
    #num4 { /*turn down*/
        position: absolute;
        top:  1200px;
        left: -70px;
    }
    #num5 { /*turn up*/
        position: absolute;
        top:  1100px;
        left: -220px;
    }
    .footer {
        color: #E217AF;
        position: absolute;
        top:  25rem;
        left: 8.5rem;
    }
}