@import "style_menu.css";
@import "style_footer.css";

html
{
 min-width: 800px ;
}

body
{
 min-width: 800px ;
 background-color: rgba(50, 50, 50, 1);
 color: white;
}


header
{
 background-image: url(Background.jpg);
 min-width: 800px;
 height: 100vh;
 background-size: cover;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin-bottom: 30px;
 align-items: center;
}

@media not all and (min-resolution:.001dpcm)
{
  @supports (-webkit-appearance:none)
  {
    header
    {
      background-attachment: scroll;
    }
  }
}

*
{
 margin: 0px;
 padding: 0px;
 font-family: monospace;
}

h1, h2, h3, h4, h5, p
{
 font-family: sans-serif;
}

.down
{
 position: absolute;
 bottom: 2vh;
 padding: 5px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 background-color: rgba(0, 0, 0, 0.3);
 font-family: monospace;
}

.down img
{
 display:inline-block;
 margin: .2em;
 background-color: rgba(255, 255, 255, 1);
 border-radius: .5em;
 padding : .2em;
 vertical-align: middle;
 height: 5em;
}

.down:hover
{
 
 background-color: rgba(0, 0, 0, 0.5);
}

.Upper_website_name
{
 display: block;
 top: 3em;
 left: 2em;
 position: absolute;
 padding: .5em;
 margin-left: 70px;
 font-size: 1.5em;
 color: white;
 flex-direction: column;
 align-items: initial;
 font-family: monospace;
}

header h1
{
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 5em;
}

.background
{
z-index: -1;
position: absolute;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.8);
}

.social 
{
 position: fixed;
 right: 0;
 display: inline-block;
 top:20%;
 padding-right: 6px;
 text-align: center;  
 margin-top: auto;
 margin-bottom: auto;
 width: 56px;
 height: 60%;
 color: white;
 background-color: rgba(0, 0, 0, 0.8);
}

.main
{
 margin: 80px;
 margin: 80px;
}

.main h2
{
margin-top: 3em;
margin-bottom: .3em;
}

.main p
{
margin-left: 1em;
margin-top: 1em;
}


.news_box
{
 min-width: 800px ;
 overflow-x: auto;
 white-space: nowrap;
 width: 100%;
 padding: .5em;
 -webkit-overflow-scrolling: touch;
}

.news_big
{
 display: inline-block;
 text-align: center;
 overflow-x: auto;
 font-size: 1.5em;
 color: white;
 background-color: rgba(0, 0, 0, 0.3);
 width: 20em;
 height: 9em; 
 padding: .5em;
 white-space: normal;
 transition: 0.3s;
 vertical-align: middle
}


.news
{
 display: inline-block;
 text-align: center;
 font-size: 1em;
 color: white;
 padding-top: .5em ;
 background-color: rgba(0, 0, 0, 0.3);
 width: 15em;
 height: 4em;
 white-space: normal; 
 transition: 0.3s;
 vertical-align: middle;
}


.news:hover
{
 transition: 0.3s;
 border-color: white;
 border-width: 1px;
 border-radius: 1em;
 background-color: rgba(15, 5, 0, 0.8);
}

.news_big:hover
{
 transition: 0.3s;
 border-color: white;
 border-width: 1px;
 background-color: rgba(15, 5, 0, 0.8);
}

.news_big .date
{
 margin-top: .5em ;
 font-size: .5em;
 font-style: italic;
}

.news h1
{
 font-size: .65em;
 margin: .5em .2em;
 font-style: bold;
}

.news_big h1
{
 font-size: .6em;
 margin: .5em .2em;
 font-style: bold;
}


.news .desc
{
 transition: all ease 0.3s;
 opacity: 0;
 font-size: .5em;
 margin: .2em;
}

.news_big .desc
{
 transition: all ease 0.3s;
 opacity: 0;
 font-size: .5em;
 margin: .2em;
}

.news:hover .desc
{
 transition: all ease 0.3s;
 opacity: 1;
 font-size: .5em;
 margin: .2em;
}

.news_big:hover .desc
{
 transition: all ease 0.3s;
 opacity: 1;
 font-size: .5em;
 margin: .2em;
}

a
{
 color: white;
 text-decoration: none;
}


.cloud 
{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 padding: 0 1em;
 margin: auto;
 text-align: center;
 overflow: hidden;
 vertical-align: middle;
}

.cloud img
{
 display:inline-block;    
 margin: .5em;
 background-color: rgba(255, 255, 255, 1);
 border-radius: 1em;
 padding : .5em;
 vertical-align: middle;
 height: 8em;
}

.cloud .message
{
 margin: .2em;
 text-align: center;
 display: inline-block;
 border-color: white;
 border-radius: 1em;
 font-size: 1.7em; 
 padding: 1.5em;
 background-color: rgba(45, 28, 45, 0.8);
}

.cloud .message:hover
{
 background-color: rgba(45, 28, 45, 0.5);
}

.share
{
 display: inline-block;
 vertical-align: middle;
}

.share img
{
 display: inline-block;
 height: 1em; 
 margin: .1em ;
}

.main *  
{
 text-decoration: none;
 font-family: sans-serif;
}