/*
Author:  Leonard Garcia
All Rights Reserved
Created on November 19, 2024
*/
 h1 {
        color: #ff0;
        background-color:black;
        /*
        text-shadow:#fff 0 -1px 4px, 
        #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px; */
    }
    h3 {
        background-color:#ff0;
        border: 8px;
        border-color: darkgreen;
        border-style: double;
        padding: .5rem;
        width: fit-content;
    }
    #swede {
        position:   absolute;
        top:        120px;   
        left:        5rem;
        width:       90px;
        height:     100px;
    }
    #button::before {
        content: url(images/mic.jpg);
        position: absolute;
        top:  -1px;
        left: -1.5px;
    }
    p {
        color: darkgreen;
    }
    #match {
        font-family:cursive;
        font-size:  1.3em;
        color:      red;
        background-color:transparent;
        border: 6px;
        border-color: darkgreen;
        border-style:solid;
        border-radius: 8px;
        padding: .5rem;
        width: fit-content;
        margin-top: 15rem;
    }

    #intro { 
        color: black; 
        background-color: dodgerblue;
        font-size: 1.5em;
        font-weight: 600;
        border: 4px;
        border-color: silver;
        border-style: inset;
        padding: .5rem;
        width: fit-content;
        clear: both;
        position: relative;
        top: 20px;
    }
    button { 
        background-color: black;
        color: darkgreen;
        font-style: italic;
        font-size: 0.875em;
        font-weight: 600;
        border-color: darkgreen;
        border-width: 6px;
        border-style: solid;
        width: 100px;
        position: relative;
        top: 10px;
        margin-bottom: 5px;
    }
    #msg { 
        color: red; 
        font-size: 150%;
        position: relative;
        top: 10px;
        margin-bottom: 5px;
    }

    .panel, .flip {
        width: 45%;
        padding: 5px;
        text-align: center;
        color: darkgreen;
        font-weight: 600;
        background-color: linen;
        border: solid 1px darkgreen;
    }

    .panel {
        padding: 5px;
        color: #A52A2A;
        display: none;    
    }
    .farsi {
        font-size: 100%;
        color: darkgreen;
        visibility: visible;
        background-image: url(../images/ricepaper_blue.jpg);
        background-position: right bottom, left top;
        background-repeat: repeat; 
        border: 6px;
        border-radius: 6px;
        border-style: ridge;
        border-color: #29c389;
        padding: 1rem;
        width: 280px; height: 80px;
    }
    .swedish {
        font-size: 100%;
        color: darkgreen;
        visibility: visible;
        background-image: url(../images/ricepaper_blue.jpg);
        background-position: right bottom, left top;
        background-repeat: repeat; 
        border: 6px;
        border-radius: 6px;
        border-style: ridge;
        border-color: #29c389;
        padding: 1rem;
        width: 280px; height: 80px;
        margin-top:   15rem;
    }
    
    #footerF {
        margin-top: 2rem;
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }
    
/****************************************************************************/
    /********************Smartphone *******************************************/
    /****************************************************************************/
    @media only screen and (max-width : 414px) and (min-width: 280px) {
        
    h1 {
        margin-left: 3rem;
        width: 75%;
        text-align:center;
    }
        
    .farsi {
        font-size: 100%;
        padding: 1rem;
        width:   21rem;
    }   
     .swedish {
        font-size: 100%;
        width: 280px; height: 80px;
        margin-top:   2rem;
        margin-bottom: 1rem;
    }
    
    #box1 {
        margin-top: 30rem;
    }
    #box2 {
        margin-top: 10rem;
    }
    
    #match {
        border: 0px;
        width: 95%;
        margin-top: 10rem;
    }
    
    #intro {
        font-size: 1.3rem;
        width:     90%;
    }
        
}