/*
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{
    position: relative;
    top: -810px;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 600;
    fill: darkgreen;
}

.verbs {
    font-size: 13px;
    font-weight: 600;
    border: 4px silver;
    border-style: solid;
    border-radius: 50%;
    padding: 1.5rem;
    width: fit-content;
    margin-left: 2rem;
    z-index: -1;
}
#num1 {  /*Internexus*/  /* WOE */
    position: absolute;
    top: 810px;
    font-size: 18px; 
    background-color: blueviolet;
    color: black;
}
#num2 { /*URL*/
    position: absolute;
    top: 845px;
    background-color: dodgerblue;
    color: black;
}
#num3 { /*Phone*/
    position: absolute;
    top: 855px;
    background-color: crimson;
    color: black;
}


/*********************************************************************************/
/*************************************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: darkgreen;
    }
    .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;
    }
   
}
/*********************************************************************************/
/*************************************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: darkgreen;
    }
    .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;
    }
   
}

/*********************************************************************************/
/*************************************Cellphone***********************************/
/********************************************************************************/

@media only screen and (max-width : 449px) and (min-width: 280px) {
    h1 {
        position: absolute;
        top:  60px;
        left: 80px;
        font-size: 40px;
    }
    
    text{
        display: none; 
        font-family: sans-serif;
        font-size:   2.6rem;
        font-weight: 600;
        fill: darkgreen;
    }
    .verbs {
        font-size: 15px;
        padding: .5rem;
    }
    #num1 {  
        position: absolute;
        top:  1400px;
        left: -180px;
    }
    #num2 {  
        position: absolute;
        top:  1470px;
        left: -180px;
    }
    #num3 { 
        position: absolute;
        top:  1520px;
        left: -180px;
    }
    
}