@font-face{
 font-family:'digital-clock-font';
 src: url('/source/digital.ttf');
}
    body{
    text-align:center;
    background-color:#F8F7F3;
    margin-top:10%; 
	overflow-x:hidden;	
    min-width:100%;

}
.hidden{
    height:30px;
    width:30px;
    top:0px;
    left:0px;
    position:fixed;
	opacity:0;
}
.hidden2{
    height:30px;
    width:30px;
    bottom:0px;
    left:0px;
    position:fixed;
	opacity:0;
}
.hidden3{
    height:30px;
    width:30px;
    bottom:0px;
    right:0px;
    position:fixed;
	opacity: 0;
}

@media screen and (min-width:1000px) { 
body{
	background-image: url('/source/background.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
div.chat:hover{
    background-color:#F8F7F3;
}
@keyframes chat{
    from{opacity:0;}
    to{opacity:1;}
}

div.chat {
    background-color:#92B6B1;
    height: 23vh;
    width: 23vh;
    position:absolute;
    left: 22%;
    top: 19vh;
    border-radius:3vh;
    transition:ease-out 0.5s;
    animation-name:chat;
    animation-duration:2s;
}
div.cl:hover{
   background-color:#F8F7F3;
}
@keyframes cl{
    from{left:0%;}
    to{left:45%;}
}
div.cl{
	background-color:#d77a61;
	height: 23vh;
	width: 23vh;
	position:absolute;
	left:45%;
	top: 2vh;
	border-radius:3vh;
	transition:ease-out 0.5s;
	animation-name:chat;
	animation-duration:2s;
}
div.int:hover{
   background-color:#F8F7F3;
}
@keyframes int{
    from{left:0%;}
    to{left:65%}
}
div.int{
	background-color:#255C99;
	height: 23vh;
	width: 23vh;
	position:absolute;
	left: 67%;
	top: 19vh;
	border-radius:3vh;
	transition:ease-out 0.5s;
	animation-name:chat;
	animation-duration:2s;
}
div.yt:hover{
  background-color:#F8F7F3;
}
@keyframes yt{
    from{top:2000px;}
    to{top:330px;}
    }
div.yt{
    background-color:#B3001B;
    height: 23vh;
    width: 23vh;
    position:absolute;
    left: 22%;
    top: 57vh;
    border-radius:3vh;
    transition:ease-out 0.5s;
    animation-name:chat;
    animation-duration:2s;
}
div.down:hover{
  background-color:#F8F7F3;
}
div.down{
   height: 23vh;
   width: 23vh;
   position:absolute;
   left:45%;
   top: 75vh;
   background-color:#7ea3cc;
   border-radius:3vh;
   transition:ease-out 0.5s;
   animation-name:chat;
   animation-duration:2s;
}
div.file:hover{
	background-color: #F8F7F3;
}
div.file{
	height: 23vh;
	width: 23vh;
	position:absolute;
	left: 67%;
	top: 55vh;
	background-color:#F7996E;
	border-radius:3vh;
	transition:ease-out 0.5s;
	animation-name:chat;
	animation-duration:2s;
}
/*a{
    font-size:40px;
    color: #FF6800;
    font-family:arial;
    font-weight:bold;
	text-align: center;
	line-height: 90px; 
} */
@keyframes time{
    from{left:-10%;}
    to{left:42%;}
}
a.time{
    top: 45vh;
    text-align: center;
    font-size: 9vh;
    font-family: Arial;
    font-weight: bold;
    color: #000000;
    position: fixed;
    left: 43%;
    text-decoration: none;
    transition: linear 0.5s;
    animation-name:chat;
    animation-duration:2s;
}
a.time:hover{
    color: #F8F7F3;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
img.chat{
	width:90%;
	height:90%;
	padding-top:5%;
}
img.cl{
	width:90%;
	height:90%;
	padding-top:10px;
	padding-left:10px;
}
img.int{
	width:90%;
	height:90%;
	padding-top:5%;
}
img.yt{
    width:100%;
	height:100%;
}
img.down{
    width:90%;
    height:90%;
    margin-top:5%;
}
img.file{
	width:90%;
   	height:90%;
	margin-top:5%;
}

.hidden{
    background-color:#dfccc2;
    height:30px;
    width:30px;
    top:0px;
    left:0px;
    position:absolute;
}
.hidden2{
	background-color:#174c55;
    height:30px;
    width:30px;
    bottom:0px;
    left:0px;
    position:absolute;
}
.hidden3{
    background-color:#56abb0;
    height:30px;
    width:30px;
    bottom:0px;
    right:0px;
    position:fixed;
	
}
.full{
    position:fixed;
    top:0px;
    right:-35px;
    height:10%;
    width:10%;
    margin-top:0.5%;
    
}
.weather{
    position:relative;
    bottom:200px;
    
}
}
@media screen and (max-width: 1000px) { 
body{
	background-image: url('/source/background-s.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}

@keyframes chat{
    from{opacity:0;}
    to{opacity:1;}
}

div.chat {
    background-color:#92B6B1;
    height:26vh;
    width:26vh;
    position:absolute;
    left:20%;
    top:15vh;
    border-radius:25px;
    transition:ease-out 0.5s;
    animation-name:chat;
    animation-duration:2s;
      
}

@keyframes cl{
    from{left:0%;}
    to{left:45%;}
}
div.cl{
	background-color:#d77a61;
	height:26vh;
	width:26vh;
	position:absolute;
	top:15vh;
	left:65%;
	border-radius:25px;
	transition:ease-out 0.5s;
	animation-name:chat;
    animation-duration:2s;
}

@keyframes int{
    from{left:0%;}
    to{left:65%}
}
div.int{
	background-color:#255C99;
	height:26vh;
	width:26vh;
	position:absolute;
	left:20%;
	top:45vh;
	border-radius:25px;
	transition:ease-out 0.5s;
	animation-name:chat;
    animation-duration:2s;
}

@keyframes yt{
    from{top:2000px;}
    to{top:330px;}
    }
div.yt{
    background-color:#B3001B;
    height:26vh;
    width:26vh;
    position:absolute;
    left:65%;
    top:45vh;
    border-radius:25px;
    transition:ease-out 0.5s;
    animation-name:chat;
    animation-duration:2s;
}

div.down{
   height:26vh;
	width:26vh;
    position:absolute;
    left:20%;
    top:75vh;
    background-color:#7ea3cc;
    border-radius:25px;
    transition:ease-out 0.5s;
    animation-name:chat;
    animation-duration:2s;
}

div.file{
	height:26vh;
	width:26vh;
	position:absolute;
	left:65%;
	top:75vh;
	background-color:#F7996E;
	border-radius:25px;
	transition:ease-out 0.5s;
	animation-name:chat;
	animation-duration:2s;
}
/*a{
    font-size:40px;
    color: #FF6800;
    font-family:arial;
    font-weight:bold;
	text-align: center;
	line-height: 90px; 
} */
@keyframes time{
    from{margin-top:-100px}
    to{margin-top:20px}
}
a.time:hover{
    color: #F8F7F3;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
a.time{
    top: 0px;
    text-align: center;
    font-size: 60px;
    font-family: Arial;
    font-weight: bold;
    color: #000000;
    margin-top: 20px;
    position: absolute;
    left: 40%;
    text-decoration: none; 
    transition: ease-out 0.5s;
    animation-name:chat;
    animation-duration:2s;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
img.chat{
	width:90%;
	height:90%;
	padding-top:5%;
}
img.cl{
	width:90%;
	height:90%;
	padding-top:5%;
	padding-left:5%;
}
img.int{
	width:90%;
	height:90%;
	padding-top:5%;
}
img.yt{
    width:100%;
	height:100%;
}
img.down{
    width:90%;
    height:90%;
    margin-top:5%;
}
img.file{
	width:90%;
   	height:90%;
	margin-top:5%;
}

.hidden{
    background-color:#F8F7F3;
    height:30px;
    width:30px;
    top:0px;
    left:0px;
    position:absolute;
}
.hidden2{
	background-color:#174c55;
    height:30px;
    width:30px;
    bottom:0px;
    left:0px;
    position:absolute;
}
.full{
    position:absolute;
    top:0px;
    right:-25px;
    height:10%;
    width:10%;
    margin-top:0.5%;
    
}
.weather{
    position:relative;
    bottom:200px;
    
}
}
@media screen and (orientation:portrait){ 
body{
	background-image: url('/source/background-m.png');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}

@keyframes chat{
    from{width:0px;height:0px}
    to{width:500px;height:500px}
}

div.chat {
    background-color:#92B6B1;
    height:500px;
    width:500px;
    position:absolute;
    left:25%;
    top:200px;
    border-radius:25px;
    transition:ease width 1s, ease height 1s;
    animation-name:chat;
    animation-duration:2s;
      
}

@keyframes cl{
    from{left:0%;}
    to{left:45%;}
}
div.cl{
	background-color:#d77a61;
	height:500px;
	width:500px;
	position:absolute;
	top:855px;
	left:25%;
	border-radius:25px;
	transition:ease width 1s, ease height 1s;
	animation-name:chat;
    animation-duration:2s;
}

@keyframes int{
    from{left:0%;}
    to{left:65%}
}
div.int{
	background-color:#255C99;
	height:500px;
	width:500px;
	position:absolute;
	left:25%;
	top:1485px;
	border-radius:25px;
	transition:ease width 1s, ease height 1s;
	animation-name:chat;
    animation-duration:2s;
}

@keyframes yt{
    from{top:2000px;}
    to{top:330px;}
    }
div.yt{
    background-color:#B3001B;
	height:500px;
	width:500px;
	position:absolute;
	left:25%;
	top:2075px;
	border-radius:25px;
	margin-top:4%;
	transition:ease width 1s, ease height 1s;
	animation-name:chat;
    animation-duration:2s;
}

div.down{
   height:500px;
	width:500px;
    position:absolute;
    left:25%;
    top:2700px;
    margin-top:4%;
    background-color:#7ea3cc;
    border-radius:25px;
    transition:ease width 1s, ease height 1s;
    animation-name:chat;
    animation-duration:2s;
}

div.file{
	height:500px;
	width:500px;
	position:absolute;
	left:25%;
	top:3330px;
	margin-top:4%;
	background-color:#F7996E;
	border-radius:25px;
	transition:ease width 1s, ease height 1s;
	animation-name:chat;
	animation-duration:2s;
}
/*a{
    font-size:40px;
    color: #FF6800;
    font-family:arial;
    font-weight:bold;
	text-align: center;
	line-height: 90px; 
} */
@keyframes time{
    from{margin-top:-100px}
    to{margin-top:20px}
}
a.time:hover{
    color: #F8F7F3;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
a.time{
    top: 0px;
    text-align: center;
    font-size: 100px;
    font-family: Arial;
    font-weight: bold;
    color: #000000;
    margin-top: 20px;
    position: absolute;
    left: 30%;
    text-decoration: none; 
    transition: color;
    animation-name:time;
    animation-duration:2s;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
img.chat{
	width:90%;
	height:90%;
	padding-top:20px;
}
img.cl{
	width:90%;
	height:90%;
	padding-top:20px;
	padding-left:10px;
}
img.int{
	width:90%;
	height:90%;
	padding-top:25px;
}
img.yt{
    width:100%;
	height:100%;
}
img.down{
    width:90%;
    height:90%;
    margin-top:5%;
}
img.file{
	width:90%;
   	height:90%;
	margin-top:5%;
}

.hidden{
    background-color:##F8F7F3;
    height:40px;
    width:40px;
    top:0px;
    left:0px;
    position:absolute;
}
.full{
    position:absolute;
    top:0px;
    right:-15px;
    height:10%;
    width:10%;
    margin-top:0.5%;
    
}
.weather{
    position:relative;
    bottom:200px;
    
}
}