@charset "utf-8";
/*
Template Name: OnlineFolio
Author: <a href="http://www.os-templates.com/">OS Templates</a>
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
File: Layout CSS
*/


@import url("navi.css");
@import url("forms.css");
/* @import url("tables.css"); */


/* 
body{width:100%; height: 100vh; height:calc(var(--vh, 1vh) * 100); margin:0; padding:0; font-size:12px; font-family:verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#db0f0f;}  */

 /* html {width: 100%;}
 body {max-width: 100%;} */

html {width:100%;  margin:auto;}

.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style-type:none;}

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
br.clear{clear:both; margin-top:-15px;}

a{outline:none; text-decoration:none;}

.fl_left, .imgl{margin-left: 20px; float:left;}
.fl_right, .imgr{margin-right: 20px; float:right;}

img{display:block; margin:0; padding:0; border:0;}
.imgl, .imgr{border:1px solid #1F262C; padding:5px;}
.imgl{margin:0 8px 8px 0; clear:left;}
.imgr{margin:0 0 8px 8px; clear:right;}

/* ----------------------------------------------Wrapper------------------------------------- */

div.wrapper{position:relative; float:left; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0; padding:0; line-height:normal; font-weight:normal; font-size:18px; font-family:Georgia, "Times New Roman", Times, serif;}
.col1{color:#333333; background-color:#222222; border-bottom:1px dotted #666666;} /* border-bottom:1px dotted #666666; */
.col2{color:#D2D2D2; background-color:#222222;}
.col3{color:#666666; background-color:#F3F3F3;}
.col3 {color:#02A2C4; background-color:#F3F3F3;}
.col4{color:#333333; background-color:#FFFFFF;}
.col4 a{color:#60E1FD; background-color:#FFFFFF;}
.col5{color:#FFFFFF; background-color:#000000;}
.col5 a{color:#60E1FD; background-color:#000000;}
.col6, .col6 a{color:#FFFFFF; background-color:#333333; font-size:12px;}

/* ----------------------------------------------Generalise------------------------------------- */

#socialise, #header, #intro, .overview, #breadcrumb, #container, #footer, #copyright{position:relative; width:100%; margin:0 auto; text-align:left;}

/* ----------------------------------------------Social Bar------------------------------------- */

#socialise{display:none; padding:20px 0; justify-content: center; text-align: center;}
#socialise ul{display:inline; margin-left: 20%; padding:0; list-style:none; font-size:20px; font-family:Georgia, "Times New Roman", Times, serif;}
#socialise li{display:inline-block; margin:0 103px 0 0; text-align:center;}
#socialise li span{display:block; margin:8px 0 0 0;}
#socialise li.last{margin-right:0;}
#socialise a{color:#333333; background-color:#222222;}
#socialise a:hover{color:#CCCCCC; background-color:#222222;}
#socialise img{object-fit: contain; height: 100px; width: 70px; align-content: center;margin: auto;}
#socialise div.imgholder{text-align: center; display:grid; width:auto; height: auto; padding: 5px; border:0px solid #000000; justify-content:center; object-fit:cover;}

/* ----------------------------------------------Header------------------------------------- */

#header{text-align:center; padding:0 0 20px 0; font-family:Verdana, Arial, Helvetica, sans-serif;}
#header h1, #header p{margin:0; padding:0;}
#header #logo{display:block; float:left; width:260px; margin-top:18px;}
#header h1{margin:0 0 7px 0; font-size:56px; font-family:Georgia, "Times New Roman", Times, serif;}
#header h1 a{color:#F3F3F3; background-color:#222222;}
#header p.toggler{display:inline;}
#header p.toggler a{align-self:center; display:block; width:100%; padding:5px 0; text-align:center; text-transform:uppercase; color:#666666; background-color:#333333;}
/* ----------------------------------------------Homepage Intro------------------------------------- */

#intro{padding:0 0 0 0; text-align: center;}
#intro h2{text-align: center; margin: 10px 0 0 0; padding:0 0 8px 0; border-bottom:1px dotted #333333;}
#intro ul{margin:auto; padding:0; list-style:none;}
#intro li{margin-top:0;}
#intro li.last{margin-bottom:10;}
#intro .box{margin:1% 2% 0 2%; display:inline-block;  margin-top: auto ; width: 275px;  padding:0;}
/* margin:1% 2% 0 2%; */
#intro .box1{display:block; float:left; width:410px; line-height:1.7em;}

/* ----------------------------------------------BreadCrumb------------------------------------- */

#breadcrumb{padding:20px 0;}
#breadcrumb ul{margin:0; padding:0; list-style:none;}
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}

/* ----------------------------------------------Portfolio Overview------------------------------------- */

div.overview{padding:20px 0 0 0; text-align:center; align-content: center; align-items: center; align-self: center;}
.overview h1#title{display:block; width:fit-content; margin-top:-20px; font-size:80px; letter-spacing:-2px; color:#2b14d8; background-color:#757175;text-align: center; text-justify: auto;}
.overview ul{ align-items:center; list-style:none;}
.overview li{display:inline-block; width:296px; margin:0 36px 36px 0; padding:0;}
/* .overview li.last{margin-right:0;} */
.overview img { object-fit: contain; max-width: 100%; height: auto; align-content: center; margin: auto;}
.wrapper .overview h2, .overview p, .overview div{margin:0 0 15px 0; padding:0;}
.overview p{line-height:1.6em;}
.overview div.imgholder{display:grid; width:284px; height: 200px; padding: 5px; border:0px solid #000000; justify-content:center; object-fit:cover;}
.overview p.readmore{display:block; width:100%; margin:0; padding:0; font-weight:bold; line-height:normal;}

/* ----------------------------------------------Content------------------------------------- */

#container{padding:0; line-height:none; text-align:justify}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{margin-bottom:15px; padding-bottom:8px; border-bottom:1px dotted #CCCCCC;}
#container img {object-fit: contain; width: 40%; height: auto; align-content: center; margin: auto;}
#content{display:block; float:left; width:600px;}


/* Comments */

#comments{margin-bottom:40px;}
#comments .commentlist{margin:0; padding:0;}
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#60E1FD; background-color:#F7F7F7;}
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#60E1FD; background-color:#E8E8E8;}
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

/* ----------------------------------------------Column------------------------------------- */

#column{display:block; float:right; width:300px;}
#column .holder, #column #featured{display:block; width:300px; margin-bottom:20px;}
#column .holder h2.title{display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; border-bottom:1px dashed #666666;}
#column .holder h2.title img{float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666;}
#column div.imgholder{display:block; width:290px; margin:0 0 10px 0; padding:4px; color:#666666; background-color:#FFFFFF; border:1px solid #CCCCCC;}
#column .holder p.readmore{display:block; width:100%; font-weight:bold; text-align:right; line-height:normal;}

/* Featured Block */

#column #featured a{color:#666666; background-color:#F9F9F9;}
#column #featured ul, #column #featured h2, #column #featured p{margin:0; padding:0; list-style:none;}
#column #featured a{color:#60E1FD; background-color:#F9F9F9;}
#column #featured li{display:block; width:250px; margin:0; padding:20px 25px; color:#666666; background-color:#F9F9F9;}
#column #featured li p.imgholder{display:block; width:240px; height:90px; margin:0px 0 15px 0; padding:1px; border:1px solid #CCCCCC;}
#column #featured li h2{margin:0; padding:0 0 14px 0; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:normal; border-bottom:1px dashed #666666;}
#column #featured p.readmore{display:block; width:100%; margin-top:15px; font-weight:bold; text-align:right; line-height:normal;}
#column #latestnews{display:block; width:100%; margin:0; padding:0; list-style:none;}
#column #latestnews li{display:block; margin:0 0 20px 0; padding:0 0 15px 0; border-bottom:1px dotted #CCCCCC;}
#column #latestnews li.last{margin-bottom:0;}
#column #latestnews p{margin:0 0 5px 0; padding:0;}
#column #latestnews p.readmore{margin:0; padding:0;}
#column #latestnews .imgl{margin:0 10px 10px 0; padding:4px;}

/* ----------------------------------------------Footer------------------------------------- */

#footer{width:100%;padding:15px 0;}
#footer ul{margin:0; padding:0; list-style:none;}
#footer h2{margin:0 0 15px 0; padding:0 0 8px 0; border-bottom:1px dotted #CCCCCC;}
#footer .box{display:inline; text-align:center; width:auto;  padding:0;}
#footer .box1{display:block; float:left; width:400px; line-height:1.6em;}
#footer .box1 .imgl{border:1px solid #CCCCCC; padding:5px; color:#FFFFFF; background-color:#000000; height: 100px; width: 100px;}
#footer .contactdetails li{text-align:center; padding:1px; position:relative; }
#footer .contactdetails ul{text-align:center; padding:1px; position:relative; }
#footer .flickrbox, #footer .flickrbox .wrap{display:block; width:260px;}
#footer .flickrbox .wrap .fix{clear:both;}
#footer .flickrbox .wrap .flickr_badge_image{display:block; float:left; margin:0 10px 10px 0; width:80px; height:80px;}
#footer .flickrbox .wrap #flickr_badge_image3, #footer .flickrbox .wrap #flickr_badge_image6{margin-right:0;}

/* ----------------------------------------------Copyright------------------------------------- */

#copyright{width:100%;position:relative; padding:15px 0;}
#copyright p{position:relative; margin:0; padding:0;}

/* nnew for index */
div.index{ padding:20px 0 0 0; text-align:center; align-content: center}
.index h1#title{display:block; width:100%; margin-top:-20px; font-size:180px; letter-spacing:-2px; color:#DDDDDD; background-color:#FFFFFF;}
.index ul{ display:inline-flex;flex-direction: column;list-style:none; align-items: center}
.index li{ width:296px; margin:0 0 0 0; padding:10px;}
.index img { object-fit: contain; max-width: 100%; height: auto; align-content: center; margin: auto;}
.wrapper .index h2, .index p, .index div{margin:0 0 15px 0; padding:0;}
.index p{line-height:1.6em;}
.index div.imgholder{ display:grid; width:296px; height: 200px; padding: 5px; border:0px solid #000000; justify-content:center; object-fit:cover;}
.index p.readmore{display:block; width:100%; margin: -10px; padding:0; font-weight:bold; line-height:normal;}
.index div.contain { align-items: center;}

/* For widjets */
#tictactoe {
    background-color: rgb(10, 9, 9);
    margin-top:10px;
    margin-bottom: 10px;
    border-collapse:collapse;
    width: fit-content;
    height: fit-content;
    font-size: 100px;

}
td {
    border: 3px solid blue;
    white-space: nowrap;
}
.calculator {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(1, 1fr);
    width: 300px;
    padding: 20px;
    background-color: #a52081;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#display {
    width: 90%;
    height: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 18px;
}

.buttons {
    display: grid;
    padding: 5px;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

button {
    width: 100%;
    height: 40px;
    font-size: 18px;
    background-color: #0074cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 2px;
    margin-right: 7px;
    margin-left:7px;
}

button:hover {
    background-color: #0058a3;
}
.button-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
}
.zero_button {
    margin: 0 auto;
    grid-column: span 3;
}