body {
   font-family: 'Goudy Old Style Semi Expansed', 'Times New Roman', Times, serif;
	font-weight: 400;
	color: #000000;
    font-size:30px;
    letter-spacing: 2px;


    background: url("./img/bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #ffffff;

    }

 .center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}


#input_element
{

background-color: rgba(255, 255, 255, 0.75);

border: 1px solid #303030;

padding:50px;
min-width:700px;
}

.num_box
    {
    background-color:#ffffff;
    border: 1px solid #000000;
    width:60px;
    height:60px;
    float-left;
    font-size:50px;



    }

h1
    {
    font-weight:normal;
    font-size:55px;
    letter-spacing: 4px;
    }

#url
    {
    cleat:both;
    float:left;
    line-height: 60px;
    width:45%;
    text-align:right;
    }


#go_div
    {

    }

#go_div a
    {
    font-size: 30px;
    text-decoration: none;
    color:#000000;

    background-color:#ffffff;
    border: 1.5px solid #000000;
    padding:10px;

    }


/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* LANDSCAPE BLUE > 1200 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (min-width: 1200px) and (orientation: landscape)
{
#size_disp
    {
    width:100px; height:50px;
    background-color:blue;
    }


}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* LANDSCAPE GREEN 992 - 1199 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {


#size_disp
    {
    width:100px; height:50px;
    background-color:green;
    }

}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* LANDSCAPE ORANGE 768 - 991 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {

#size_disp
    {
    width:100px; height:50px;
    background-color:orange;
    }

}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* LANDSCAPE RED < 768 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (max-width: 768px) and (orientation: landscape) {

#size_disp
    {
    width:100px; height:50px;
    background-color:red;
    }

}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* PORTRAIT BLUE > 1200 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (min-width: 1200px) and (orientation: portrait)
{
#size_disp
    {
    width:50px; height:100px;
    background-color:blue;
    }


}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* PORTRAIT GREEN 992 - 1199 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (min-width: 992px) and (max-width: 1199px) and (orientation: portrait) {


#size_disp
    {
    width:50px; height:100px;
    background-color:green;
    }
}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* PORTRAIT ORANGE 768 - 991 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */



@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

#size_disp
    {
    width:50px; height:100px;
    background-color:orange;
    }

}



/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* PORTRAIT RED < 768 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */


@media (max-width: 768px) and (orientation: portrait) {

#size_disp
    {
    width:50px; height:100px;
    background-color:red;
    }


}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */
/* PORTRAIT RED EXTREME < 500 */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */

@media (max-width: 450px) and (orientation: portrait)
{



}

/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-  */



@font-face  {
            font-family: 'Goudy Old Style Semi Expansed';
            src: url(GOUDOS.ttf);
            }

@font-face  {
            font-family: 'Goudy Old Style Semi Expansed Bold';
            src: url(GOUDOSB.ttf);
            }